<template>
    <div>
        <h2>{{ $t('user.preferences.language.title') }}</h2>
        <el-form :model="form" label-position="left" label-width="25%">
            <el-form-item :label="$t('user.preferences.language.label')">
                <el-select v-model="form.lang">
                    <el-option v-for="(value, key) in langList" :key="key" :label="value" :value="key" />
                </el-select>
            </el-form-item>
            <div class="btn-list">
                <el-button @click="submitHandle" color="#F06423">{{ $t('golbal.btn_text_1') }}</el-button>
                <el-button @click="cancleHandle" color="#F06423">{{ $t('golbal.btn_text_3') }}</el-button>
            </div>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue'
import { useRouter } from 'vue-router'

import { useI18n } from 'vue-i18n'
import { setLocale, langList } from '@/locales/i18n'
import type { SupportedLocales } from '@/locales/i18n'
import type { MessageSchema } from '@/types/i18n'

const router = useRouter()
const { locale } = useI18n<{ message: MessageSchema }, SupportedLocales>()

const form = reactive<{ lang: any }>({
    lang: locale.value,
})
const submitHandle = () => {
    setLocale(form.lang)
    locale.value = form.lang
}
const cancleHandle = () => {
    router.go(-1)
}

watch(locale, () => {
    form.lang = locale.value
})
</script>

<style lang="less" scoped>
h2 {
    margin-bottom: 30px;
    font-size: 30px;
    font-weight: normal;
    line-height: 1.2;
    color: #000;
}

:deep(.el-form) {
    .el-form-item {
        .el-form-item__label {
            color: #4c4c4c;
        }
    }

    .btn-list {
        display: flex;
        justify-content: center;
    }
}
</style>
